<template>
  <div>
    <!-- 搜索条件 -->
    <div class="top-operate">
      <div>
        <div class="inline-flex">
          <el-select v-model="textCol" class="width-150">
            <el-option label="主订单号" value="projectOrderNo"></el-option>
            <el-option label="子订单号" value="orderNo"></el-option>
            <el-option label="收件人姓名" value="customerNickname"></el-option>
            <el-option label="收件人手机" value="customerPhone"></el-option>
          </el-select>
          <el-input v-model="textValue" placeholder="请输入内容" class="mar-l-5 width-300"></el-input>
        </div>
        <div class="inline-flex">
          <el-select v-model="timeCol" class="width-150">
            <el-option label="下单时间" value="syncTime"></el-option>
            <el-option label="生成时间" value="createTime"></el-option>
            <el-option label="付款时间" value="payTime"></el-option>
            <el-option label="发货时间" value="deliveryTime"></el-option>
            <el-option label="收货时间" value="receivedTime"></el-option>
            <el-option label="完成时间" value="completeTime"></el-option>
          </el-select>
          <el-date-picker v-model="timeValue" type="daterange" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <el-select v-model="searchListQuery.warehouseCustomsStatus" placeholder="仓库报关状态" class="mar-l-10 width-140"
          clearable>
          <el-option v-if="key === '4'" v-for="(val, key) in dict.warehouseCustomsStatus" :key="key" :label="val"
            :value="key"></el-option>
        </el-select>
        <el-select v-model="searchListQuery.paymentOrderCustomsStatus" placeholder="支付单报关状态" class="mar-l-10 width-140"
          clearable>
          <el-option v-if="['4','6','7'].includes(key)" v-for="(val, key) in dict.paymentOrderCustomsStatus" :key="key"
            :label="val" :value="key">
          </el-option>
        </el-select>
        <el-select v-model="searchListQuery.afterSaleFlag" placeholder="售后状态" class="mar-l-10 width-140" clearable>
          <el-option v-for="(val, key) in dict.afterSaleFlag" :key="key" :label="val" :value="key">
          </el-option>
        </el-select>
        <el-button-group class="mar-l-20">
          <el-button type="primary" @click="doSearch">查询</el-button>
          <el-button @click="doResetSearch">重置</el-button>
        </el-button-group>
      </div>
    </div>
    <div class="table-container">
      <el-table :data="dataList" @selection-change="checkedAllHandle" v-loading="listLoading"
        element-loading-text="加载中">
        <el-table-column width="50px" type="selection"></el-table-column>
        <el-table-column min-width="240px" label="订单信息" fixed="left">
          <template slot-scope="scope">
            <div class="flex v-align-c">
              <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="t-goods-pic"></label>
              <div class="font-14 pad-l-10 line-2">
                <span>{{ scope.row.goodsTitle }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="280px" label="订单号">
          <template slot-scope="scope">
            <div>子订单号: {{scope.row.orderNo}}</div>
            <div>主订单号: {{scope.row.projectOrder.orderNo}}</div>
          </template>
        </el-table-column>
        <el-table-column width="140px" label="仓库报关状态" align="center">
          <template slot-scope="scope">
            <div>{{ dict.warehouseCustomsStatus[scope.row.warehouseCustomsStatus] }}</div>
            <div>{{scope.row.projectOrder.warehouseCustomsStatusRemark}}</div>
          </template>
        </el-table-column>
        <el-table-column width="140px" label="支付单报关状态" align="center">
          <template slot-scope="scope">
            <div>{{ dict.paymentOrderCustomsStatus[scope.row.paymentOrderCustomsStatus] }}</div>
            <div>{{scope.row.projectOrder.paymentOrderCustomsStatusRemark}}</div>
          </template>
        </el-table-column>
        <el-table-column width="140px" label="订单状态" align="center">
          <template slot-scope="scope">
            <div>{{dict.orderStatus[scope.row.orderStatus]}}</div>
          </template>
        </el-table-column>
        <el-table-column width="140px" label="付款人" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.projectOrder.customerNickname}}</div>
          </template>
        </el-table-column>
        <el-table-column width="100px" label="商品数量" prop="supplierOrderPrice" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.goodsNum}}</div>
          </template>
        </el-table-column>
        <el-table-column width="140px" label="订单金额">
          <template slot-scope="scope">
            <div>商品：￥{{ scope.row.orderPrice }}</div>
            <div>运费：￥{{ scope.row.freight }}</div>
            <div>合计: ￥{{ scope.row.orderPrice ? scope.row.orderPrice : '0' }}</div>
          </template>
        </el-table-column>
        <el-table-column width="120px" label="操作" align="right" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="medium" @click="doLinkDetail(scope.row)">查看详情</el-button>
            </div>
            <div>
              <el-button type="text" size="medium" @click="doResetWarehouse(scope.row)"
                v-if="scope.row.paymentOrderCustomsStatus === 6">支付报关</el-button>
              <template v-if="scope.row.afterSaleFlag != 1">
                <el-button type="text" size="medium" @click="doResetCustomsReDeclaration(scope.row)"
                  v-if="![-1,-2].includes(scope.row.orderStatus) && scope.row.paymentOrderCustomsStatus === 7">重新支付报关
                </el-button>
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="searchListQuery.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    pagingCustomsFailedOrderList,
    doResetWarehouse,
    doResetCustomsReDeclaration
  } from '@/api/goods/apartOrder'
  import {
    getDictByGroupName
  } from '@/api/common/common'
  import orderStopDetail from '@/views/goods/order/exception-manage/order-stop-detail'
  import elDragDialog from '@/directive/el-dragDialog'

  export default {
    directives: {
      elDragDialog
    },
    components: {
      orderStopDetail
    },
    data() {
      return {
        // tab model
        // 文本model
        textCol: 'projectOrderNo',
        textValue: '',
        // 时间model
        timeCol: 'syncTime',
        timeValue: [],
        // 截停商品详情visible
        stopGoodsDetailVisible: false,
        // 截停商品详情visible
        reDeclarationlVisible: false,
        // 查询条件
        searchListQuery: {
          currentPage: 1,
          size: 10,
          warehouseCustomsStatus: '',
          paymentOrderCustomsStatus: '',
          afterSaleFlag: ''
        },
        // 数据字典
        dict: {
          orderStatus: {},
          orderType: {},
          warehouseCustomsStatus: {},
          paymentOrderCustomsStatus: {},
          afterSaleFlag: {}
        },
        shopList: [],
        // 仓库集合
        warehouseList: [],
        suppliers: [],
        dataList: [],
        multipleSelection: [],
        total: 0,
        listLoading: false,
        warehouseIdDisabledButton: false,
        supplierIdDisabledButton: false,
        // 选中子单id
        selectedApartOrderId: '',
        warehouseCustomsStatusList: '4',
        paymentOrderCustomsStatusList: '4, 6, 7',
        crossBorderOrderType: 2,
        supplierId: ''
      }
    },
    created() {
      // 获取清关状态字典
      getDictByGroupName('ProjectOrderDTO').then(response => {
        if (response.isError) return
        Object.assign(this.dict, response.data)
      })
      this.doSearch()
    },
    methods: {
      // 初始化
      initList() {
        this.listLoading = true
        this.setSearchListQuery()
        pagingCustomsFailedOrderList(this.searchListQuery).then(response => {
          this.listLoading = false
          if (response.isError) return
          this.total = response.data.total
          this.dataList = response.data.records
        })
      },
      // 构建查询条件
      setSearchListQuery() {
        this.searchListQuery = {}
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.dateColumn = this.timeCol
        this.searchListQuery.startDate = (this.timeValue && this.timeValue.length > 0) ? this.timeValue[0] : ''
        this.searchListQuery.endDate = (this.timeValue && this.timeValue.length > 1) ? this.timeValue[1] : ''
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.supplierId = this.getSupplierId()
        this.searchListQuery.crossBorderOrderType = 2
        if (!this.searchListQuery.warehouseCustomsStatus) {
          this.searchListQuery.warehouseCustomsStatusList = this.warehouseCustomsStatusList
        } else {
          this.searchListQuery.warehouseCustomsStatusList = null
        }
        if (!this.searchListQuery.paymentOrderCustomsStatus) {
          this.searchListQuery.paymentOrderCustomsStatusList = this.paymentOrderCustomsStatusList
        } else {
          this.searchListQuery.paymentOrderCustomsStatusList = null
        }
        this.searchListQuery.paymentOrderCustomsStatusList = this.paymentOrderCustomsStatusList
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.timeCol = originData.timeCol
        this.timeValue = originData.timeValue
        this.searchListQuery = originData.searchListQuery
        this.doSearch()
      },
      // 查看详情事件
      doLinkDetail(row) {
        this.$router.push({
          path: '/order/apart-detail',
          query: {
            apartOrderId: row.apartOrderId
          }
        })
      },
      // 重新支付报关
      doResetCustomsReDeclaration(row) {
        this.listLoading = true
        doResetCustomsReDeclaration(row.apartOrderId).then(response => {
          this.listLoading = false
          if (response.isError) return
          this.initList()
        })
      },
      // 支付报关
      doResetWarehouse(row) {
        // 调用分仓逻辑
        this.listLoading = true
        doResetWarehouse(row.apartOrderId).then((response) => {
          if (response.isError) {
            if (response.code === 102) {
              this.$message({
                type: 'error',
                message: response.msg
              })
            }
          } else {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
          }
          this.initList()
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      },
      // 获得选择项
      checkedAllHandle(val) {
        this.multipleSelection = this.$utils.deepClone(val)
      },
      // 查看详情事件
      doStopGoodsDetail(row) {
        this.selectedApartOrderId = row.apartOrderId
        this.stopGoodsDetailVisible = true
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
